<template>
	<view class="content">
		<view class="contentBox">
			<view class="left">
				<view :class="currentId == item.id ? 'leftItem on' : 'leftItem'" v-for="item in categoryList" :key="item.id" @tap="changeItem(item.id)">
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view class="right">
				<view class="rightBox">
					<view class="img">
						<image :src="currentCategory.banner_url" mode="widthFix"></image>
						<text>{{ currentCategory.front_desc }}</text>
					</view>
					<view class="titleBox">
						<text class="titleBefore"></text>
						<text class="title">{{ currentCategory.name }}</text>
					</view>
					<view class="item">
						<u-grid :border="false" @click="click">
							<u-grid-item v-for="(baseListItem, baseListIndex) in currentCategory.subCategoryList" :key="baseListItem.id">
								<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="baseListItem.wap_banner_url" :size="26"></u-icon>
								<text class="grid-text">{{ baseListItem.name }}</text>
							</u-grid-item>
						</u-grid>
						<u-toast ref="uToast" />
					</view>
				</view>
			</view>
		</view>
		<customTabBar></customTabBar>
	</view>
</template>

<script>
import customTabBar from '@/custom-tab-bar/index.vue';
import { ApiCataLog, ApiCurrentCataLog } from '@/utils/api.js';
export default {
	data() {
		return {
			categoryList: [],
			currentId: 1005000,
			currentCategory: []
		};
	},
	components: {
		customTabBar
	},
	methods: {
		async changeItem(id) {
			this.currentId = id;
			let res = await ApiCurrentCataLog({ id: id });
			let { currentCategory } = res.data;
			this.currentCategory = currentCategory;
		},
		click(name) {
			this.$refs.uToast.success(`点击了第${name}个`);
		}
	},
	async onLoad() {
		let res1 = await ApiCataLog();
		let res2 = await ApiCurrentCataLog({ id: this.currentId });
		let { categoryList } = res1.data;
		let { currentCategory } = res2.data;
		this.categoryList = categoryList;
		this.currentCategory = currentCategory;
		console.log(res2);
	},
	onShow() {
		this.$store.commit('changeTabbarIndex', 2);
	}
};
</script>

<style lang="scss">
uni-page-body {
	height: 100%;
}
.content {
	width: 750rpx;
	height: 100%;
	.contentBox {
		display: flex;
		width: 100%;
		height: 100%;
		.left {
			display: flex;
			flex-wrap: wrap;
			width: 300rpx;
			height: 100%;
			background-color: #f7f8fa;
			flex: 1;
			box-sizing: border-box;
			overflow: scroll;
			flex-direction: column;
			.leftItem {
				width: 100%;
				height: 120rpx;
				text-align: center;
				line-height: 120rpx;
				font-size: 28rpx;
				position: relative;
			}
			.on {
				background-color: #fff;
				&::before {
					position: absolute;
					background-color: #ee0a24;
					top: 50%;
					left: 0;
					width: 8rpx;
					height: 32rpx;
					transform: translateY(-50%);
					content: '';
				}
			}
		}
		.right {
			// flex: 1;
			width: 80%;
			.rightBox {
				.img {
					width: 95%;
					position: relative;
					height: 280rpx;
					image {
						width: 100%;
						height: 280rpx !important;
						margin: 0 7px;
						border-radius: 5px;
						box-shadow: 0 0 6px #000;
						filter: brightness(0.5);
					}
					text {
						width: 100%;
						color: #fff;
						position: absolute;
						top: 48%;
						left: 0%;
						z-index: 1;
						text-align: center;
						font-size: 28rpx;
					}
				}
				.titleBox {
					width: 100%;
					height: 100rpx;
					font-size: 32rpx;
					position: relative;
					background: #fff;
					font-size: 16px;
					.titleBefore {
						width: 50%;
						height: 4rpx;
						background-color: #ccc;
						position: absolute;
						margin: auto;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
					}
					.title {
						width: 30%;
						height: 80rpx;
						position: absolute;
						background-color: #fff;
						margin: auto;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						line-height: 80rpx;
						text-align: center;
						color: #000;
					}
				}

				.item {
					.u-grid {
						.u-grid-item {
							padding: 32rpx 16rpx;
							.grid-text {
								color: #646566;
								font-size: 24rpx;
								line-height: 1.5;
								word-break: break-all;
							}
						}
					}
				}
			}
		}
	}
}
</style>
